<template>
  <!-- 近三个月烟支总量 -->
  <div ref="chatMin" class="w100 h100">
    11
  </div>
</template>

<script setup lang="ts">
import http from "@/http/index";
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
const chatMin = ref();

onMounted(async () => {
  let monthData = [];
  let series = [];
  let smokename = [];
  const res2 = await http.corsApi("/index/smokeGroupBrandFromLastThreemonth", "get", {});
  console.log("res2", res2);

  monthData = Object.keys(res2.data);

  console.log(monthData);

  monthData.forEach((item) => {
    smokename = Object.keys(res2.data[item]);
    console.log(smokename);
    let data = [];
    smokename.forEach((ele) => {
      data.push(res2.data[item][ele]);
    });
    console.log(data);

    series.push({
      name: item,
      type: "bar",
      emphasis: {
        focus: "series",
      },
      data: data,
    });
  });
  console.log(series);

  var app = {};

  // var chartDom = document.getElementById('main');
  var myChart = echarts.init(chatMin.value);
  var option;

  const posList = ["left", "right", "top", "bottom", "inside", "insideTop", "insideLeft", "insideRight", "insideBottom", "insideTopLeft", "insideTopRight", "insideBottomLeft", "insideBottomRight"];
  app.configParameters = {
    rotate: {
      min: -90,
      max: 90,
    },
    align: {
      options: {
        left: "left",
        center: "center",
        right: "right",
      },
    },
    verticalAlign: {
      options: {
        top: "top",
        middle: "middle",
        bottom: "bottom",
      },
    },
    position: {
      options: posList.reduce(function (map, pos) {
        map[pos] = pos;
        return map;
      }, {}),
    },
    distance: {
      min: 0,
      max: 100,
    },
  };
  app.config = {
    rotate: 90,
    align: "left",
    verticalAlign: "middle",
    position: "insideBottom",
    distance: 15,
    onChange: function () {
      const labelOption = {
        rotate: app.config.rotate,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        position: app.config.position,
        distance: app.config.distance,
      };
      myChart.setOption({
        series: [
          {
            label: labelOption,
          },
          {
            label: labelOption,
          },
          {
            label: labelOption,
          },
          {
            label: labelOption,
          },
        ],
      });
    },
  };
  const labelOption = {
    show: true,
    position: app.config.position,
    distance: app.config.distance,
    align: app.config.align,
    verticalAlign: app.config.verticalAlign,
    rotate: app.config.rotate,
    formatter: "{c}  {name|{a}}",
    fontSize: 16,
    rich: {
      name: {},
    },
  };
  option = {
    title: {
      padding: [10, 0, 0, 20],
      text: "近三个月烟支总量",
      subtext: "",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      padding: [35, 0, 20, 0],
      // data: ["七月", "八月", "九月"],
      data: monthData,
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      top: "22%",
      containLabel: true,
    },
    toolbox: {
      show: true,
      orient: "vertical",
      left: "right",
      top: "center",
      feature: {
        // mark: { show: true },
        // dataView: { show: true, readOnly: false },
        // magicType: { show: true, type: ["line", "bar", "stack"] },
        // restore: { show: true },
        // saveAsImage: { show: true },
      },
    },
    xAxis: [
      {
        type: "category",
        axisTick: { show: false },
        data: smokename,
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: series,
    // [
    //   {
    //     name: "七月",
    //     type: "bar",
    //     barGap: 0,
    //     // label: labelOption,
    //     emphasis: {
    //       focus: "series",
    //     },
    //     data: [320, 332, 301, 334, 390],
    //   },
    //   {
    //     name: "八月",
    //     type: "bar",
    //     // label: labelOption,
    //     emphasis: {
    //       focus: "series",
    //     },
    //     data: [220, 182, 191, 234, 290],
    //   },
    //   {
    //     name: "九月",
    //     type: "bar",
    //     // label: labelOption,
    //     emphasis: {
    //       focus: "series",
    //     },
    //     data: [150, 232, 201, 154, 190],
    //   },
    // ],
  };

  option && myChart.setOption(option);
});
</script>

<style scoped>
</style>